import React, { useEffect } from 'react'
import CitySelect from './cityselect'
import { useSearchParams} from 'react-router-dom'
import RecommendList from '@/components/recommondList'
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom'
import { 
    getLocalDataAction
} from '@/store/actionCreators'
import { rootState } from '@/store';
import { Dispatch } from 'redux'

interface LocalProps{
  local:any[];
  getLocalDataActionDispatch:()=>void;
}

const Local:React.FC<LocalProps> = (props:LocalProps) => {
  const {local}=props;
    const {
        getLocalDataActionDispatch
      }=props
    useEffect(() => {
      getLocalDataActionDispatch();
    }, [])
    useEffect(()=>{

    })
  
  const [search] = useSearchParams()
    const cityName = search.get('name') || ''
    useEffect(()=>{
      // console.log(cityName)
      // console.log(local)
    },[])
  return (
    <div>
      <CitySelect cityName={cityName} />
      {
        local.length==0?
        <div>
          暂无景点
        </div>
        :<RecommendList recommend={local.filter((content: { title: string | string[]; }) => content.title.includes(cityName))} />
      }
    </div>
  )
}

const mapStateToProps = (state:rootState) => {
  return {
    local:state.Local.local,
  }
}
const mapDispatchToProps = (dispatch:Dispatch) => {
  return {
    getLocalDataActionDispatch(){
          dispatch(getLocalDataAction())
        }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Local))


// export default Local
